import Component from "../Component.js";

export default class MineFilter extends Component{
    constructor() {
        super();

        this.pageNo = 1;
        this.pageNum = 0;
        this.pageSize = 10;
    }

    async getDataByPageNO() {
        const name = this.$$("#mine-name").val();
        const data = await this.api.getMines(name, this.pageNo, this.pageSize);
        const mines = data.data;
        this.pageNum = Math.ceil(mines.total / 10);
        this.$$("#mine-table-page").html(`总计: ${this.pageNum}页, 当前: ${this.pageNo}页`);
        this.$$("#mine-table").empty();
        for (let i = 0; i < mines.data.length; i++) {
            const item = mines.data[i], id = `mine-table-${i}`;
            let tr= `
                <tr id="${id}">
                    <td class="label-cell">${i + 1}</td>
                    <td class="label-cell">${item.name}</td>
                    <td class="label-cell">${item.code}</td>
                    <td class="label-cell">${item.address}</td>
                </tr>
            `;
            this.$$("#mine-table").append(this.$$(tr));

            this.$$('#' + id).on("click", () => {
                this.app.dialog.confirm(`确认切换到 ${item.name} ?`, async () => {
                    this.utils.setLocalStorage('mine', item);
                    this.$$("#title").html(item.name);
                    this.popup.close();
                })
            });
        }
    }

    template() {
        const mine_popup_div = `
            <div class="popup mine-popup">
                <header>选择煤矿</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="mine-name">
                                            <input type="text" placeholder="请选择煤矿..." id="mine-name">
                                        </label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="card data-table" style="height: 480px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="label-cell">#</th>
                                        <th class="label-cell">煤矿名称</th>
                                        <th class="label-cell">煤矿编码</th>
                                        <th class="label-cell">煤矿地址</th>
                                    </tr>
                                </thead>
                                <tbody id="mine-table"></tbody>
                            </table>
                        </div>
                    </div>
                </article>
                <footer>
                    <span id="mine-popup-prev" class="popup-page">
                        <<&nbsp;前一页&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <span id="mine-table-page"></span>
                    <span id="mine-popup-next" class="popup-page">
                        &nbsp;&nbsp;&nbsp;&nbsp;后一页&nbsp;>>
                    </span>
                </footer>
                <a href="#" class="popup-closer" id="mine-popup-close"></a>
            </div>
        `;
        this.$$('#app').append(mine_popup_div);
    }

    control() {
        this.$$("#mine-popup").on("click", async () => {
            this.popup = this.app.popup.create({ el: '.mine-popup' });
            this.popup.open();

            await this.getDataByPageNO();

            this.$$("#mine-name").on("change", async () => {
                this.pageNo = 1;
                await this.getDataByPageNO();
            });

            this.$$("#mine-popup-prev").on("click", async () => {
                this.delay('mine-prev', async () => {
                    if (this.pageNo > 1 ) {
                        this.pageNo = this.pageNo - 1;
                    }
                    await this.getDataByPageNO();
                }, 300);
            });

            this.$$("#mine-popup-next").on("click", async () => {
                this.delay('mine-next', async () => {
                    if (this.pageNo < this.pageNum) {
                        this.pageNo = this.pageNo + 1;
                    }
                    await this.getDataByPageNO();
                }, 300);
            });

            this.$$("#mine-popup-close").on("click", async () => {
                this.popup.close();
            });
        })
    }
}